<template>
  <view class="tool-wrap">
    <view class="row">
      <picker :range="currs" :value="from" @change="e=>from=e.detail.value"><view class="picker">从：{{ currs[from] }}</view></picker>
      <picker :range="currs" :value="to" @change="e=>to=e.detail.value"><view class="picker">到：{{ currs[to] }}</view></picker>
    </view>
    <input class="ipt" type="number" v-model.number="amount" placeholder="输入金额" placeholder-class="ph" />
    <text class="result">≈ {{ out }}</text>
  </view>
</template>

<script>
export default {
  name: 'CurrencyConverter',
  data() { return { currs:['CNY','USD','EUR','JPY'], from:0, to:1, amount:100 } },
  computed: {
    out() {
      const rate = {
        CNY: { USD: 0.1402, EUR: 0.1204, JPY: 21.3694 },
        USD: { CNY: 7.1327, EUR: 0.8587, JPY: 152.42 },
        EUR: { CNY: 8.3056, USD: 1.1646, JPY: 177.49 },
        JPY: { CNY: 0.0468, USD: 0.00656, EUR: 0.00563 },
      }
      const f = this.currs[this.from]
      const t = this.currs[this.to]
      if (f === t) return this.amount.toFixed(2) + ' ' + t
      const r = (rate[f] && rate[f][t]) || 1
      return (this.amount * r).toFixed(2) + ' ' + t
    }
  }
}
</script>

<style>
.tool-wrap { display: grid; gap: 12rpx; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
.picker { height: 60rpx; border-radius: 20rpx; padding: 0 20rpx; display: flex; align-items: center; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ipt { height: 64rpx; border-radius: 20rpx; padding: 0 20rpx; color: #e9ecff; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ph { color: #a7b0d9; }
.result { margin-top: 8rpx; font-size: 26rpx; font-weight: 600; }
</style>


